import React, {Component} from 'react';
import PropTypes from 'prop-types';

const ListTitle = (props) => {
  return (
    <h3>{props.title}</h3>
  )
}

class ListItem extends Component {
  static contextTypes = {
    color: PropTypes.string
  }
  render () {
    const {value} = this.props;
    return (
      <li style={{background: this.context.color}}>
        <span>{value}</span>
      </li>
    )
  }
}

class List extends Component {
  static childContextTypes = {
    color: PropTypes.string,
    title: PropTypes.string
  }
  getChildContext () {
    return {
      color: 'orange',
      title: 'Title'
    }
  }
  render () {
    const {list} = this.props;
    return (
      <div>
        <ListTitle></ListTitle>
        <ul>
          {
            list.map((entry, index) => (
              <ListItem key={`item-${index}`} value={entry.text}></ListItem>
            ))
          }
        </ul>
      </div>
    )
  }
}

export default List;
